<!DOCTYPE html>

<html>

  <head>
    <title>Embed FusionTablesLayer Builder code into Google Sites</title>
    <style type="text/css">
      body {
        font-family: Arial;
      }

      li {
        margin-bottom: 5px;
      }
    </style>
  </head>

  <body>
    <h1>Embed FTL Builder Code into Google Sites page</h1>

    <p>Instructions (based off the directions found here
    http://www.google.com/support/forum/p/sites/thread?tid=7d31c9ceaa70faec&hl=en).
    </p>

    <ol>
      <li>
        Copy the XML below and paste it in Notepad or some other text editor.
      </li>

      <li>
        Copy and paste your FTL Builder code between <pre>&lt;![CDATA[</pre> and
        <pre>]]>&lt;/Content></pre> (the XML below already has some FTL
        Builder code between these lines - that code can be deleted).
      </li>

      <li>
        Save the file
      </li>

      <li>
        Click on the "More Actions" button at the top right of your Google Site,
        then click on "Manage Site"
      </li>

      <li>
        On left nav bar, click on "Attachments"
      </li>

      <li>
        Click "Upload" and upload the XML file 
      </li>

      <li>
        On the uploaded file, right click on "download," and click on "Copy Link
        Address" or whatever gets the file location
      </li>

      <li>
        Go to the page you want to add the file and click "Edit Page" 
      </li>

      <li>
        Find the spot you want the file, then click "Insert" at the upper
        left, and all the way at the bottom click "More Gadgets"
      </li>

      <li>
        Click "Add Gadget by URL" and paste the URL of your XML file you
        uploaded in step #7
      </li>
    </ol>

<pre>
&lt;Module>
&lt;ModulePrefs 
title="Fusion Tables"
title_url="http://www.google.com/fusiontables"
description="Fusion Tables"
width="520"
height="450">
&lt;/ModulePrefs>
&lt;Content type="html">&lt;![CDATA[
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;style>
  #map_canvas { width: 500px; height: 400px; }
&lt;/style>

&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">&lt;/script>
&lt;script type="text/javascript">
var map;

var layer;
var tableid = 222171;

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(37.26968150969718, -122.200927734375),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setQuery("SELECT 'Location' FROM " + tableid);
  layer.setMap(map);
}

function changeMap() {
  var searchString = document.getElementById('searchString').value.replace("'", "\\'");
  layer.setQuery("SELECT 'Location' FROM " + tableid + " WHERE 'Name' CONTAINS IGNORING CASE '" + searchString + "'");
}
&lt;/script>

&lt;/head>
&lt;body onload="initialize();">

&lt;div id="map_canvas">&lt;/div>

&lt;div style="margin-top: 10px;">
  &lt;label>Name &lt;/label>
  &lt;input type="text" id="searchString">
  &lt;input type="button" onclick="changeMap();" value="Search">
&lt;div>

&lt;/body>
&lt;/html>
]]>&lt;/Content>
&lt;/Module>
</pre>

    <p>Special thanks to Michelle Minkoff for her great
    <a href="http://michelleminkoff.com/2011/10/30/answering-some-faqs-about-fusion-tables/">FAQ
    page</a>!</p>

  </body>
</html>
